<template>
  <div class="infoshow">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">
        <div class="user">
          <img src="@/assets/img/logo.jpg" class="avater" alt="" />
        </div>
      </el-col>
      <el-col :span="16">
        <div class="userinfo">
          <div class="userinfobox">
            <div class="user-tiem">
              <i class="fa fa-user"></i>
              <span>{{ user.name }}</span>
            </div>
            <div class="user-item">
              <i class="fa fa-address-book"></i>
              <span>{{ user.identity == "manager" ? "管理员" : "员工" }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Infoshow",
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
};
</script>

<style scoped>
.infoshow .user {
  position: relative;
  height: 85vh;
  background-color: #fff;
}

.user .avater {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.infoshow .userinfo {
  position: relative;
  height: 85vh;
  background-color: #ebebeb;
}

.infoshow .userinfobox {
  position: absolute;
  top: 45%;
  left: 20%;
  overflow: hidden;
}

.user-tiem {
  padding: 10px;
  font-size: 18px;
}

.user-item {
  padding: 10px;
  font-size: 18px;
}

i {
  margin-right: 10px;
}
</style>